<template>
  <div class="ans-box" :class="{imgTitle:list[currentIndex].modeType==1}" v-if="dataReady">
    <!-- 用户一计分 -->
    <!-- <div class="select-box"> -->
    <!-- 题型和序号 -->
    <div class="title-type" :class="{titleTypeIn:showTitleType}">{{questionType}}<img src="/static/titleType.png" alt=""></div>
    <div class="title-number" :class="{titleNumberIn:showTitleType}">第{{currentIndex+1}}题</div>
    <div class="title-level" v-if="isRank" :class="{titleLevelIn:showTitleType}">{{levelList[currentIndex]}}</div>
    <div class="double-tip" :class="{doubuleTipIn:showDoubleTip}">
      <div class="x2">X2</div>
    </div>
    <div class="score-process" :class="{processIn:showProcess}">
      <div class="score">{{myScoreNumber}}</div>
      <div class="process" :style="myProcess"></div>
    </div>

    <!-- 题目选项 -->
    <div class="ans-center" v-if="dataReady">
      <div class="title" :class="{titleIn:showTitle}">{{list[currentIndex].title}}</div>
      <div class="img-box" :class="{imgIn:showTitle}" v-if="list[currentIndex].modeType==1">
        <img mode="aspectFit" :src="IMGHEAD+list[currentIndex].image" alt="">
      </div>

      <div class="select-list" :class="{listIn:showList}">
        <div class="select-item" :class="{success:item.state=='success',fail:item.state=='fail',noSelect:item.noSelect}" v-for="(item,index) in list[currentIndex].optionList" :key="index" @click="select(item,index)">
          <img v-if="item.state=='success'&&item.userOne" class="left-img" src="/static/sIcon.png" alt="">
          <img v-if="item.state=='fail'&&item.userOne" class="left-img" src="/static/fIcon.png" alt=""> {{item.name}}
          <img v-if="item.state=='success'&&item.userTwo" class="right-img" src="/static/sIcon.png" alt="">
          <img v-if="item.state=='fail'&&item.userTwo" class="right-img" src="/static/fIcon.png" alt="">
        </div>
      </div>
    </div>

    <!-- 用户二计分 -->
    <div class="score-process" :class="{processIn:showProcess}">
      <div class="score">{{otherScoreNumber}}</div>
      <div class="process" :style="otherProcess" :class="{otherAnsFail:otherAnsFail}"></div>
    </div>
    <!-- 答错遮罩 -->
    <div class="fail-mask" v-if="showFailMask"></div>
    <!-- </div> -->

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: [
    "questionList",
    "currentIndex",
    "otherScore",
    "myScore",
    "canNext",
    "oldGame",
    "netWork",
    "initTime"
  ],
  data() {
    return {
      timer: null,
      time: 10000,
      timeOut: false,
      list: null,
      myScoreNumber: 0,
      myProcess: "height:0%;",
      otherScoreNumber: 0,
      otherProcess: "height:0%;",
      otherAns: null,
      otherAnsOk: false,
      currentSelect: false, //当前题目是否作答
      answerMap: {},
      result: { myScore: 0, otherScore: 0 }, //答题结果,
      //动画相关
      isFirst: true,

      showTitle: false,
      showTitleType: false,
      showList: false,
      showProcess: false,
      showFailMask: false, //错误红色遮罩
      animationTime: 1,
      showDoubleTip: false,
      otherAnsFail: false,
      // 音频
      audio: {},
      levelList: [],
      dataReady: false
    };
  },
  watch: {
    canNext() {
      this.showOtherAns(); //展示双方答案
    },
    time(val) {
      if (val <= 0) {
        this.stopTimer();
        this.timeOut = true;
        console.log("timeout");
      }
    },
    initTime(val) {
      this.time = val;
    },

    currentIndex(val) {
      //题目更新
      // 重置 双方答题状态
      this.setUserOneState(false);
      this.setUserTwoState(false);
      if (!this.netWork) {
        this.stopTimer();
        this.currentSelect = false;
        this.timeOut = false;
        // 更新题目动画
        this.showTitleTag();
      } else {
        this.oldGameShow();
      }
    },
    otherScore(val) {
      if (val.score == 0) {
        this.otherAnsFail = true;
        setTimeout(() => {
          this.otherAnsFail = false;
        }, 500);
      }
      this.otherScoreNumber = val.score;
      this.otherProcess = `height:${this.otherScoreNumber / 12}%;`;
      this.result.otherScore = this.otherScoreNumber;
    },
    myScore(val) {
      this.myScoreNumber = val.score;
      this.myProcess = `height:${this.myScoreNumber / 12}%;`;
      this.result.myScore = this.myScoreNumber;
    }
  },
  computed: {
    ...mapState(["userOneState", "userTwoState", "isRank", "IMGHEAD"]),
    answer() {
      //当前题目答案
      if (this.list) {
        return this.list[this.currentIndex].answer;
      }
    },
    questionType() {
      if (this.list) {
        let type = this.list[this.currentIndex].parentType;
        let obj = {
          1: "德",
          2: "商",
          3: "文",
          4: "理",
          5: "艺",
          6: "体",
          7: "图"
        };
        return obj[type];
      }
    }
  },
  methods: {
    ...mapMutations(["setUserOneState", "setUserTwoState"]),
    initAudio() {
      this.audio = wx.createInnerAudioContext();
    },
    audioPlay(type) {
      if (type == "success") {
        this.audio.src = "/static/audio/right.mp3";
      } else {
        this.audio.src = "/static/audio/wrong.mp3";
      }
      this.audio.play();
    },

    animationStep1(reLink) {
      this.showList = true;
      this.startTimer();
      this.$emit("ansStart");
      if (!this.isFirst && !reLink) {
        this.$emit("nextQuestion");
      }
      this.isFirst = false;
      if (this.currentIndex != 4) {
        this.showProcess = true;
      }
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.time -= 100;
      }, 100);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.time = 10000;
    },
    showTitleTag() {
      //题目类型
      this.showTitleType = true;
      if (this.currentIndex == 4) {
        //双倍提示
        this.showDoubleTip = true;
      }
      setTimeout(() => {
        //题目类型隐藏
        this.showTitleType = false;
        this.showDoubleTip = false;
      }, 1500);

      setTimeout(() => {
        //显示题目
        this.showTitle = true;
        setTimeout(() => {
          this.animationStep1(false);
        }, 1000);
      }, 1600);
    },
    oldGameShow() {
      this.timeOut = false;
      this.showTitle = true;
      this.showProcess = true;
      this.animationStep1(true);
    },
    getList() {
      this.list = JSON.parse(JSON.stringify(this.questionList)); //深拷贝 问题数据
      for (let i = 0; i < this.list.length; i++) {
        for (let j = 0; j < this.list[i].optionList.length; j++) {
          this.list[i].optionList[j].state = null;
          this.list[i].optionList[j].name = this.list[i].optionList[
            j
          ].name.replace(/\s+/g, "");
          this.list[i].optionList[j].isSelect = false;
        }
      }
      this.dataReady = true;
      this.getRatioList(this.list);
    },
    getRatioList(list) {
      for (let item of list) {
        if (item.rightRatio >= 80) {
          this.levelList.push("简单");
        }
        if (item.rightRatio >= 60 && item.rightRatio < 80) {
          this.levelList.push("普通");
        }
        if (item.rightRatio >= 40 && item.rightRatio < 60) {
          this.levelList.push("进阶");
        }
        if (item.rightRatio >= 20 && item.rightRatio < 40) {
          this.levelList.push("高手");
        }
        if (item.rightRatio < 20) {
          this.levelList.push("修罗");
        }
      }
    },
    select(item, index) {
      //TODO 检查答案，处理选中逻辑
      if (!item.select && !this.userOneState && !this.timeOut) {
        let answerMap = {};
        for (
          let i = 0;
          i < this.list[this.currentIndex].optionList.length;
          i++
        ) {
          answerMap[
            this.list[this.currentIndex].optionList[i].name
          ] = this.list[this.currentIndex].optionList[i].sortId;
        }
        let obj = {
          type: 4,
          data: {
            answer: answerMap[item.name],
            index: this.currentIndex,
            seconds: this.time, //到 questionBox在赋值
            timeout: false, // 默认false, qsb 赋值
            uid: 0 //qbs 赋值
          }
        };
        item.select = true;
        item.userOne = true;
        if (item.sortId == this.list[this.currentIndex].optionSortId) {
          this.setUserOneState(true);
          item.state = "success";
          this.audioPlay("success");
          this.$emit("success", obj); //提交答案 send type4
        } else {
          //答错的业务处理
          item.state = "fail";
          this.audioPlay("fail");
          this.setUserOneState(true);
          this.showFailMask = true;
          wx.vibrateLong({
            success: () => {
              console.log("zhendong");
            }
          });
          setTimeout(() => {
            this.showFailMask = false;
          }, 400);
          this.$emit("fail", obj);
        }
        this.stopTimer(); //计时器停止
      }
    },
    showOtherAns() {
      //双方都答题后 才显示 B用户数据  则此行为即为 可下一题状态 不需要在判定
      //显示对方选项
      let list = this.list[this.currentIndex].optionList;
      for (let i = 0; i < list.length; i++) {
        if (
          this.otherScore.right &&
          list[i].sortId == this.otherScore.rightAnswer
        ) {
          list[i].state = "success";
          list[i].select = true;
          list[i].userTwo = true;
        } else if (
          !this.otherScore.right &&
          list[i].sortId == this.otherScore.answer
        ) {
          list[i].state = "fail";
          list[i].select = true;
          list[i].userTwo = true;
        }
      }

      //展示正确选项 隐藏未选择选项
      for (let i = 0; i < list.length; i++) {
        if (
          list[i].state != "success" &&
          list[i].state != "fail" &&
          list[i].sortId != this.otherScore.rightAnswer
        ) {
          list[i].noSelect = true;
        } else if (
          list[i].state != "success" &&
          list[i].state != "fail" &&
          list[i].sortId == this.otherScore.rightAnswer
        ) {
          list[i].state = "success";
          list[i].select = true;
        }
      }
      if (this.currentIndex != 4) {
        this.$emit("questionOk", this.result);
        console.log("请求下一题");
      }

      // 上一题退场动画
      setTimeout(() => {
        this.showTitle = false;
        this.showList = false;
        if (this.currentIndex == 4) {
          this.showProcess = false;
          this.$emit("questionOk", this.result);
        }
      }, 1500);
    }
  },
  mounted() {
    this.getList();
    if (this.oldGame) {
      this.oldGameShow();
    } else {
      this.showTitleTag();
    }
    this.initAudio();
  },
  onUnload() {
    this.stopTimer();
  }
};
</script>

<style lang="scss" scoped>
.ans-box {
  width: 100%;
  height: 920rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.ans-center {
  min-height: 100rpx;
  transition: all 0.4s ease;
  align-self: flex-start;
}
.imgTitle {
  .title {
    font-size: 34rpx;
    height: 114rpx ;
    margin: 19rpx auto 11rpx auto;
  }
}
.title {
  width: 610rpx;
  min-height: 136rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 69rpx auto 100rpx auto;
  font-size: 42rpx;
  color: #000;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.img-box {
  width: 500rpx;
  height: 278rpx;
  margin: 0 auto 30rpx auto;
  opacity: 0;
  transition: all 0.8s ease;
  img {
    width: 100%;
    height: 100%;
  }
}
.titleIn {
  opacity: 1;
}
.imgIn {
  opacity: 1;
}
.title-type,
.title-number,
.title-level {
  position: absolute;
  left: 50%;
  opacity: 0;
  top: 0;
}
.title-type {
  transform: translate(-50%, 0rpx);
  font-size: 60rpx;
  color: #67c29f;
  text-align: center;
  img {
    position: absolute;
    width: 265rpx;
    height: 92rpx;
    bottom: -46rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.title-number {
  transform: translate(-50%, 0rpx);
  font-size: 40rpx;
  color: #6b6a6b;
  text-align: center;
  font-size: 90rpx;
  font-weight: bold;
}
.title-level {
  width: 130rpx;
  height: 50rpx;
  line-height: 50rpx;
  background: #f5af4b;
  border-radius: 1000rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
.titleTypeIn {
  animation: ttIn 1.28s ease;
}
.titleNumberIn {
  animation: tnIn 1.28s ease;
}
.titleLevelIn {
  animation: tlIn 1.28s ease;
}
.doubuleTipIn {
  animation: dtIn 1.28s ease;
}
// .imgTitle {
//   .titleTypeIn {
//     animation: ttIn2 1.28s ease;
//   }
//   .titleNumberIn {
//     animation: tnIn2 1.28s ease;
//   }
//   .titleLevelIn {
//     animation: tlIn2 1.28s ease;
//   }
//   .doubuleTipIn {
//     animation: dtIn 1.28s ease;
//   }
// }
@keyframes ttIn {
  0% {
    transform: translate(-50%, 0rpx);
    opacity: 0;
  }
  33% {
    transform: translate(-50%, 20rpx);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, 20rpx);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 40rpx);
    opacity: 0;
  }
}

@keyframes tnIn {
  0% {
    transform: translate(-50%, 140rpx) scale(0);
    opacity: 1;
  }
  33% {
    transform: translate(-50%, 140rpx) scale(1);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, 140rpx) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 140rpx) scale(0);
    opacity: 0;
  }
}
@keyframes tlIn {
  0% {
    transform: translate(-50%, 260rpx) scale(0);
    opacity: 1;
  }
  33% {
    transform: translate(-50%, 260rpx) scale(1);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, 260rpx) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 260rpx) scale(0);
    opacity: 0;
  }
}

@keyframes dtIn {
  0% {
    transform: translate(-50%, 320rpx) scale(0);
    opacity: 1;
  }
  33% {
    transform: translate(-50%, 320rpx) scale(1);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, 320rpx) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 320rpx) scale(0);
    opacity: 0;
  }
}

.double-tip {
  position: absolute;
  width: 522rpx;
  height: 46rpx;
  background: rgba(#67c29f, 0.23);
  border-radius: 1000rpx;
  left: 50%;
  transform: translate(-50%, 0rpx) scale(0);
  opacity: 0;
  top: 0;
  &:before,
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 46rpx;
    border-radius: 1000rpx;
  }
  &:before {
    content: "";
    width: 424rpx;
    background: rgba(#67c29f, 0.46);
  }
  &:after {
    width: 320rpx;
    background: #67c29f;
    content: "双倍得分";
    text-align: left;
    padding-left: 46rpx;
    box-sizing: border-box;
    line-height: 46rpx;
    font-size: 36rpx;
    color: #fff;
  }
  .x2 {
    font-size: 72rpx;
    color: #fff;
    font-weight: bold;
    -webkit-text-stroke: 2rpx #67c29f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(40%, -50%);
    z-index: 5;
  }
}

.select-box {
  margin-top: 80rpx;
  display: flex;
  justify-content: center;
}

.select-list {
  height: 604rpx;
  min-width: 630rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .select-item {
    width: 530rpx;
    height: 120rpx;
    margin: 0 50rpx;
    position: relative;
    font-size: 40rpx;
    border: 3rpx solid #ababab;
    border-radius: 20rpx;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0);
    // filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
    transition: all 0.4s ease;
    box-shadow: 0 0 20rpx 6rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 536rpx 114rpx;
    background-repeat: repeat-y;
    background-image: url("");
    img {
      position: absolute;
      width: 44rpx;
      height: 44rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .left-img {
      left: 25rpx;
    }
    .right-img {
      right: 25rpx;
    }
  }
  .success,
  .fail {
    border: 6rpx solid #fff;
    color: #fff;
    animation: btnScale 0.4s ease;
  }

  .success {
    background: #67c29f;
  }
  .fail {
    background: #e9848c;
  }
  .noSelect {
    transform: scale(0) !important;
    opacity: 0 !important;
  }
}
.imgTitle {
  .ans-center {
    .select-list {
      height: 448rpx;
      .select-item {
        width: 433rpx;
        height: 96rpx;
        font-size: 32rpx;
        box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.25);
        img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
.fail-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: rgba(red, 0.2);
}
@keyframes btnScale {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.listIn {
  .select-item {
    transform: scale(1);
    opacity: 1;
  }
}
.processIn {
  transform: translateX(0) !important;
}
.score-process {
  box-sizing: border-box;
  width: 30rpx;
  height: 564rpx;
  border: 3rpx solid #858585;
  padding: 4rpx;
  border-radius: 1000rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 20rpx;
  transition: all 0.4s ease;
  transform: translateX(-120rpx);
  &:last-child {
    transform: translateX(120rpx);
  }
  .score {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40rpx;
    color: #676565;
    line-height: 1;
    top: -40rpx;
  }
  .process {
    width: 100%;
    background: #67c29f;
    border-radius: 1000rpx;
    height: 0;
    transition: all 0.3s linear;
  }
}
.otherAnsFail {
  background: #fd5c5c !important;
}
</style>
